<script setup>
import { inject, onMounted, ref, toRefs } from "vue";
import BaseButton from "../ui/BaseButton.vue";
import BaseCard from "../ui/BaseCard.vue";
import BaseDialog from "../ui/BaseDialog.vue";

const addResourceFunc = inject("addResource");

const titleInput = ref();
const descInput = ref();
const linkInput = ref();

const inputIsInvalid = ref(false);

const submitData = function () {
  const enteredTitle = titleInput.value.value;
  const enteredDescription = descInput.value.value;
  const enteredLink = linkInput.value.value;

  if (
    enteredTitle.trim() === "" ||
    enteredDescription.trim() === "" ||
    enteredLink.trim() === ""
  ) {
    inputIsInvalid.value = true;
    return;
  }

  addResourceFunc(enteredTitle, enteredDescription, enteredLink);
};

const confirmError = function () {
  inputIsInvalid.value = false;
};
</script>

<template>
  <BaseDialog v-if="inputIsInvalid" title="Invalid Input" @close="confirmError">
    <template #default>
      <p>at least one input value is invalid.</p>
      <p>please check input</p>
    </template>
    <template #actions>
      <BaseButton @click="confirmError">Okey</BaseButton>
    </template>
  </BaseDialog>
  <BaseCard>
    <form @submit.prevent="submitData">
      <div class="form-control">
        <label for="title">Title</label>
        <input id="title" name="title" type="text" ref="titleInput" />
      </div>
      <div class="form-control">
        <label for="description">Description</label>
        <textarea
          id="description"
          name="description"
          rows="3"
          ref="descInput"
        ></textarea>
      </div>
      <div class="form-control">
        <label for="link">Link</label>
        <input id="link" name="link" type="url" ref="linkInput" />
      </div>
      <div>
        <BaseButton type="submit">Add Resource</BaseButton>
      </div>
    </form>
  </BaseCard>
</template>

<style scoped>
label {
  font-weight: bold;
  display: block;
  margin-bottom: 0.5rem;
}
input,
textarea {
  display: block;
  width: 100%;
  font: inherit;
  padding: 0.15rem;
  border: 1px solid #ccc;
}
</style>
